<template>
    <el-select :filterable="filterable" :value="value" :placeholder="placeholder" :clearable="clearable"
        :multiple="multiple" :collapse-tags="collapseTags" @change="selectOptions"
        :class="[full ? 'full-box-class' : '']">
        <el-option v-for="item in options" :key="item[props.value]" :label="item[props.label]"
            :value="item[props.value]" />
    </el-select>
</template>

<script>
export default {
    name: 'selects-view',
    props: {
        filterable: {
            type: Boolean,
            default: true
        },
        placeholder: {
            type: String,
            default: '请选择'
        },
        clearable: {
            type: Boolean,
            default: true
        },
        options: {
            type: Array,
            default: () => []
        },
        props: {
            type: Object,
            default: () => ({
                label: 'label',
                value: 'value'
            })
        },
        value: {
            type: String,
            default: ''
        },
        full: {
            type: Boolean,
            default: false
        },
        multiple: {
            type: Boolean,
            default: false
        },
        collapseTags: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        selectOptions(val) {
            this.$emit('input', val)
            this.$emit('change', val)
        }
    },

}
</script>

<style scoped lang="scss">
.full-box-class {
    width: 100%;
}
</style>